<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-10-09 16:45:17
 * @LastEditTime : 2022-10-09 16:48:37
 * @FilePath     : \src\ExampleCom.vue
-->
<script setup lang="ts">
import { toRefs, watch } from 'vue'

const props = defineProps({
  id: {
    type: Number
  },
  name: {
    type: String
  }
})

//第一种方法：toRefs解构
const {id, name} = toRefs(props)
watch(id, ()=>{
  console.log('id改变了')
})

//第二种方法，没有使用toRefs时，需要这种方式监听
// watch(
//   () => props.id,
//   () => {
//     console.log('id改变了')
//   }
// )
</script>

<template>
    <div>{{ id }}</div>
    <div>{{ name }}</div>
</template>